<template>
  <view class="container">
    <view class="head" id="head">
      <view class="title">你好{{state.userInfo?.nickname}}</view>
      <view class="search">
        <uni-easyinput prefixIcon="search" class="searchInput" placeholder="搜索订单或老师"  @change="searchTeacher" @clear="searchTeacher"></uni-easyinput>
      </view>
    </view>
    <view class="bottom">
      <view class="tabs" id="tabs">
        <view :class="['tabItem', state.tabCurrentId === item.id ? 'tabItemHover' : '']" v-for="(item, index) in tabs" :key="index" @click="changeTab(item)">
          <view class="left">
            <image :src="item?.icon" :style="{width: item.id == 4 && '84rpx'}"></image>
            <text>{{item?.name}}</text>
            <!-- <view class="circleRed" :style="{right: item.id == 4 && '34rpx'}"></view> -->
          </view> 
          <view class="line"></view>  
        </view>
      </view>
      <TeacherPage 
        v-if="state.tabCurrentId == 1"  
        :teacherInfo="state.teacherInfo" 
        @get-teacher-info="getTeacherInfo"
        :searchValue="state.searchValue"
        :scrollHeight = "state.remainingHeight"
        :majorList="state.majorList"
      />
      <OrderPage 
        v-if="state.tabCurrentId == 2" 
        :orderList="state.orderList"
        :allOrderInfo="state.allOrderInfo"
        @send-list="sendList" 
        @get-all-list="getAllList"
        :scrollHeight = "state.remainingHeight"
      />
      <FinancePage 
        v-if="state.tabCurrentId == 3" 
        :searchValue="state.searchValue"
        :unPaidInfo="state.unPaidInfo"
        @get-unpaid-fun = "getUnpaidFun"
        :scrollHeight = "state.remainingHeight"
      />
      <MsgPage 
        v-if="state.tabCurrentId == 4"
        @get-list="getList"
        :listInfo="state.listInfo"
        :scrollHeight = "state.remainingHeight" 
      />
    </view>
  </view>
  <TabBar :tabBaActive="0"/>
</template>

<script setup>
  import { tabs, tabs2 } from './data.js'
  import { ref, reactive, nextTick, onMounted } from 'vue'
  import TabBar from '@/components/tabBar.vue'
  import TeacherPage from './components/teacher.vue'
  import OrderPage from './components/orderPage.vue'
  import FinancePage from './components/financePage.vue'
  import MsgPage from './components/msg.vue'
  import { getTeacherList, awaitOrder, getAllOrder, adminFinanceStatistics,adminFinanceOrder, adminMessageList, getTeacherMajorList } from  '@/utils/admin.js'
  import { onShow, onLoad } from '@dcloudio/uni-app'
  
  const state = reactive({
    tabCurrentId : 1,
    searchValue: '',
    teacherInfo: {list: []},
    userInfo: {},
    orderList: [],
    allOrderInfo: [],
    unPaidInfo: {},
    listInfo:[],
    headHeight: 0,
    tabsHeight: 0,
    allHeight: 0,
    remainingHeight:0,
    majorList: []
  })
  onShow(() => {
    state.userInfo = uni.getStorageSync('userInfo')
    // getTeacherInfo({tabId: null, page: 1})
  })
  const getModuleHeight = () => {
    const query = uni.createSelectorQuery();
    query.select("#head").boundingClientRect((res) => {
      if (res) {
        state.headHeight = res.height; // 更新模块的高度
      }
    }).exec();
    query.select("#tabs").boundingClientRect((res) => {
      if (res) {
        state.tabsHeight = res.height; // 更新模块的高度
        const totalHeight = uni.getSystemInfoSync().windowHeight;
        state.allHeight = state.headHeight + res.height + uni.getStorageSync('tabBarHeight')
        state.remainingHeight = totalHeight - state.allHeight
        console.log(88, state.remainingHeight)
      }
    }).exec();     
  }
  // 在页面加载完成后调用
  onMounted(() => {
    getModuleHeight();
  });
  // 点击tab切换
  const changeTab = (item) => {
    state.tabCurrentId = item.id
    if (item.id == 1) {
      getTeacherInfo({tabId: '', page: 1})
    } else if (item.id == 2) {
      sendList({tabId: 1, page: 1})
    } else if (item.id == 3) {
      getUnpaidFun({tabId: 1, page: 1})
    } else {
      getList({type: 1})
    }
  }
  const moveNullToFront = (arr) => {
    // 1. 提取所有 null 元素
    const nulls = arr.filter(item => item === null); 
    // 2. 提取非 null 元素（保持原顺序）
    const nonNulls = arr.filter(item => item !== null);
    
    // 3. 合并数组（null 在前）
    console.log(174, [...nulls, ...nonNulls])
    return [...nulls, ...nonNulls];
  }
  const getMajorList = () => {
    getTeacherMajorList().then((res) => {
      console.log(160, res)
      if (res?.code == 1) {
        state.majorList = res.result ? moveNullToFront(res.result) : []
      }
    })
  }
  
  const getList = ({type}) => {
    adminMessageList({type: type}).then((res) => {
      if (res?.code == 1) {
        state.listInfo = res?.result
      }
    })  
  }
  const searchTeacher = (e) => {
    state.searchValue = e || ""
    nextTick(() => {
      if(state.tabCurrentId == 1){
        getTeacherInfo({tabId: '', page: 1})
      } else if (state.tabCurrentId == 2) {
        sendList({tabId: 1, page: 1})
      } else if (state.tabCurrentId == 3) {
        getUnpaidFun({tabId: 1, page: 1})
      }
    })
  }
  // 老师团队
  const getTeacherInfo = ({tabId, page}) => {
    console.log(71, tabId, page)
    if (page == 1) {
      state.teacherInfo = {list: []}
    }
    getMajorList()
    nextTick(() => {
      let params = {
        search: state.searchValue,
        type: tabId || '',
        page: page,
        limit: 20
      }
      getTeacherList(params).then((res) => {
        if (res?.code ==  1) {
          let listArr = [...state.teacherInfo.list, ...res.result.list]
          state.teacherInfo = {
            ...res?.result,
            list: listArr
          }
        }    
      })
    })
    
  }
  // 财务-订单-待结款
  const getUnpaidFun = ({page}) => {
    let params = {
      search: state.searchValue,
      page,
      limit: 20
    }
    adminFinanceOrder(params).then((res) => {
      if (res?.code == 1) {
        state.unPaidInfo = res?.result
      }
    })
  }
  
  // 订单业务, 默认派单列表
  const sendList = async({tabId, page}) => {
    let params = {
      search: state.searchValue,
      type: tabId,
      page: page,
      limit: 20
    }
    await awaitOrder(params).then((res) => {
      if (res?.code == 1) {
        state.orderList = res?.result
      }  
    })
  }
  // 所有订单
  const getAllList = async({tabId, page}) => {
    let params = {
      search: state.searchValue,
      type: tabId,
      page: page,
      limit: 20
    }
    await getAllOrder(params).then((res) => {
      console.log(103, res)
      if (res?.code == 1) {
        console.log(105, res?.result?.list)
        state.allOrderInfo = res?.result
      }  
    })
  }


</script>

<style lang="scss" scoped>
  .container{
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .head{
      width: 750rpx;
      height: 434rpx;
      border-bottom-right-radius: 72rpx;
      border-bottom-left-radius: 72rpx;
      background: radial-gradient(132.09% 132.09% at 50% 47%, rgba(27, 79, 215, 0.48) 0%, #184BC9 46.63%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 20px;
        line-height: 100%;
        letter-spacing: 0px;
        text-align: center;
        color: #ffffff;
      }
      .search{
        width: 510rpx;
        height: 92rpx;
        border-radius: 18rpx;
        margin-top: 30rpx;
      }
    }
    .bottom{
      display: flex;
      position: absolute;
      flex-direction: column;
      align-items: center;
      width: 100%;
      top:378rpx;
      left:0;
      .tabs{
        width: 686rpx;
        height: 228rpx;
        // margin-left: 30.66rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        .tabItem{
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          position: relative;
          height: 100%;
          
          .left{
            height: 138rpx;
            border-right:4rpx dashed rgba(146, 146, 146, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 176rpx;
            margin-top: 56rpx;
            position: relative;
            .circleRed{
              width: 22rpx;
              height: 22rpx;
              position: absolute;
              background: rgba(255, 51, 51, 1);
              right: 50rpx;
              top: 0;
              border-radius: 100%;
            }
            
            image{
              width: 52rpx;
              height: 54rpx;
            }
            text{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              text-align: center;
              color: rgba(165, 165, 165, 1);
              margin-top: 30rpx;
            }
          }
          
        }
        .tabItem:nth-last-child(1){
          .left{
            border-right: none;
          } 
        }
        .tabItemHover{
          text{
            color: rgba(11, 105, 218, 1);
          }
          .line{
            background:rgba(43, 90, 207, 1);
            height: 4rpx;
            width: 160rpx;
            box-shadow: 0 8rpx 8rpx 0 rgba(11, 105, 218, 1);
          }
        }
      }
    }
  }
  
</style>